

<template>
  <div class="flex-container">
    <el-select-v2
        v-model="param.userRole"
        :options="options"
        placeholder="租金下限"
        style="width: 240px; margin-right: 20px;"
        @change="getUsers"
    />
    <el-input v-model="param.phone" placeholder="请输入联系方式" style="width: 240px ;margin-right:20px" @input="getUsers"/>
    <el-input v-model="param.likeName" placeholder="请输入用户名" style="width: 240px ;margin-right:20px" @input="getUsers"/>
  </div>
  <div>
    <el-table :data="users" style="width: 100%">
      <el-table-column prop="account" label="账号" width="180" />
      <el-table-column prop="userName" label="用户名" width="180" />
      <el-table-column prop="userRole" label="用户权限" />
      <el-table-column prop="isDelete" label="是否删除">
        <template v-slot="{ row }">
      <span :class="{ 'highlight': row.isDelete === 1 }">
        {{ row.isDelete === 1 ? '是' : '否' }}
      </span>
        </template>
      </el-table-column>
      <el-table-column prop="phone" label="联系方式" />
      <el-table-column prop="naivePlace" label="籍贯" />

      <el-table-column
          label="操作"
          width="160"
          align="center"
      >
        <template v-slot="scope">
          <el-button
              type="text"
              size="small"
              class="blueBug"
              @click="openDialog(scope.row)"
          >
            设置权限
          </el-button>
            <el-button
                type="text"
                size="small"
                class="delBut non"
                @click="banUpUser(scope.row)"
            >
              {{ scope.row.isDelete == '1' ? '启用' : '禁用' }}
            </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog v-model="dialogVisible" title="设置权限">
      <el-form  label-position="left" label-width="120px">
        <!-- 其他表单项 ... -->
        <el-form-item label="用户权限">
          <el-select v-model="updateUserRoleParam.userRole" placeholder="请选择用户权限">
            <el-option label="普通用户" value="customer"></el-option>
            <el-option label="管理员" value="admin"></el-option>
          </el-select>
        </el-form-item>
        <el-button type="primary" @click="update" style="margin-top: 30px">确认设置</el-button>
      </el-form>
    </el-dialog>
    <el-pagination
        v-if="users.length"
        class="pageList"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="param.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        v-model:current-page="page"
        @current-change="handleCurrentChange"
    ></el-pagination>
  </div>
</template>


<script setup lang="ts">

import {
  BaseSetting_,
  BaseSettingControllerService,
  User_,
  UserControllerService,
  UserRequestParam
} from "../../generated";
import {onMounted, reactive, ref} from "vue";
import {ElMessage} from "element-plus";
import ACCESS_ENUM from "@/access/accessEnum";

const param = reactive({
  current: 1,
  pageSize: 10, // 默认每页显示10条
  phone:'',
  likeName:'',
  userRole:'',
} as unknown as  UserRequestParam );

onMounted(() => {
  getUsers();
});

const users=ref([]);
const total=ref();
const page = ref(1);

const getUsers = async () => {
  try {
    const response = await UserControllerService.listPageUsingPost3(param);
    if (response.code === 200) {
     console.log(response)
      users.value=response.result.list;
      total.value = response.result.total;
    } else {
      console.error('Failed to fetch rooms:', response.message);
    }
  } catch (error) {
    console.error('Error fetching rooms:', error);
  }
};

const handleSizeChange = (pageSize: number | undefined) => {
  param.pageSize = pageSize;
  getUsers();
};

const handleCurrentChange = (currentPage: number | undefined) => {
  param.current = currentPage;
  getUsers();
};
const updateUserRoleParam=reactive({
  id:'',
  userRole:'',
} as unknown as  User_)
const dialogVisible=ref(false);
const openDialog = (row: any) => {
  // 设置 selectedUserRole 的初始值为用户当前的权限
  updateUserRoleParam.id=row.id;
  updateUserRoleParam.userRole=row.userRole;
  // 打开对话框
  dialogVisible.value = true;
};

const update = async () => {
  try {
    const response = await UserControllerService.updateUserUsingPost(updateUserRoleParam);
    if (response.code === 200) {
      ElMessage.success("修改成功");
      getUsers();
      dialogVisible.value=false
    } else {
      console.error('Failed to fetch rooms:', response.message);
    }
  } catch (error) {
    console.error('Error fetching rooms:', error);
  }
};


const options = ref([
  { value: '', label: '权限不限' },
  { value: ACCESS_ENUM.CUSTOMER, label: '客户' },
  { value: ACCESS_ENUM.ADMIN, label: '管理员' },
])
const banUpUserParam =reactive({
  id: '',
} as unknown as User_)
const banUpUser = async (row :any) => {
  try {
    const response = await UserControllerService.deleteUserUsingGet(row.id);
    if (response.code === 200) {
      ElMessage.success("修改成功");
      getUsers();
    } else {
      console.error('Failed to fetch rooms:', response.message);
    }
  } catch (error) {
    console.error('Error fetching rooms:', error);
  }
};


</script>
<style scoped>
.pageList {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>